<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="font_2477364_wu0wguawp9/iconfont.css"/>
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
  </head>

  <body style="overflow-x: hidden">
    <!-- 头部-->
    <div class="top">
      <!-- 头部导航栏左边 -->
      <div class="top_left">
        <span class="top_left_logo"></span>
        <span class="top_left_input"
          >下拉查看类目<img src="img/top/toplogo1.png"
        />
        <ul class="top_nav" >
          <li>礼包收藏</li>
          <li>手办模型</li>
          <li>数码电子</li>
          <li>玩家共创</li>
          <li>新品专区</li>
          <li>二觉礼盒</li>
          <li>服饰日用</li>
        </ul>
      </span>
     
      </div>
     
      <!-- 头部导航栏中间 -->
      <a href="index.html" class="top_center">
      </a>
      <!-- 头部导航栏右边-->
      <div class="top_right">
        <a href="./html/logo.html">
          <span class="top_right_nav hs iconfont" style="font-size: 12px"
            >&#xe637;请QQ登录</span
          ></a
        >
        <a href="#">
          <span class="top_right_nav">
          我的订单<img src="img/top/toplogo1.png" /></span>
      </a>
        <a href="#">
          <span class="top_right_nav"
            >周边公告<img src="img/top/toplogo1.png" /></span
        ></a>
        <a href="#">
          <span class="top_right_nav"
            >帮助中心<img src="img/top/toplogo1.png" /></span
        ></a>
        <a href="#">
          <span class="top_right_nav iconfont" style="font-size: 12px"
            >&#xe633;手机周边</span
          ></a
        >
      </div>
    </div>
    <!-- 头部-->

    <!--导航栏-->
    <div class="nav">
      <div class="nav_box">
        <div class="nav_list">
          <a href="./index.html">商城首页</a>
          <a href="#">全部商品</a>
          <a href="#">礼包收藏</a>
          <a href="#">领取游戏道具</a>
          <a href="#">土罐集市</a>
          <a href="#" class="no_line">妙趣盒·点亮大集结</a>
        </div>
        <div class="nav_right">
          <input type="text" class="txt" placeholder="全站搜索" />
          <span class="big"></span>
        </div>
      </div>
    </div>
    <!--导航栏-->

    <!-- banner图部分 -->

    <!-- ---第一个banner图---  -->
    <div id="banner">
      <div class="swiper-container">
        <div class="x"></div>
        <div class="list">
          <div class="list_nav">神奇扭蛋机<br />2.0</div>
          <div class="list_nav">惊喜礼包</div>
          <div class="list_nav">雪人萌道送惊喜</div>
        </div>
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="img/banner/banner2.jpg" /></div>
          <div class="swiper-slide"><img src="img/banner/banner3.jpg" /></div>
          <div class="swiper-slide"><img src="img/banner/banner1.jpg" /></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!-- ---第一个banner图---  -->

    <!-- ---第二个banner图---  -->
    <div class="banner_2">
      <h3>周边公告：</h3>
      <div class="swiper-container1">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href="#">新疆，湖北暂停发放</a>
            <span>2019/4/5</span>
          </div>
          <div class="swiper-slide">
            <a href="#">神奇扭蛋机Q币奖品发放说明</a>
            <span>2020/4/5</span>
          </div>
          <div class="swiper-slide">
            <a href="#">商城异常信息收集</a>
            <span>2021/11/5</span>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <!--     <div class="swiper-pagination"></div>
 -->
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <!--   <div class="swiper-scrollbar"></div> -->
      </div>
    </div>
    <!-- ---第二个banner图---  -->
    <!-- banner图部分 -->

    <!-- ---商品列表1---  -->
    <!-- swiper轮播图第三个 -->
    <div class="product_list1">
      <!-- swiper轮播图第三个 -->
      <div class="swiper-container2">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="product1_box">
              <div class="goods-box">
                <div class="goods-title">-HOT DERIVATIVE</div>
                <div class="goods-bigtitle">热门周边</div>
                <div class="goods-title">一</div>
              </div>
            </div>
          </div>

          <div class="swiper-slide">
            <div class="product1_box">
              <div class="goods-box">
                <div class="goods-title">-HOT DERIVATIVE</div>
                <div class="goods-bigtitle">热门周边2</div>
                <div class="goods-title">一</div>
              </div>
            </div>
          </div>

          <div class="swiper-slide">
            <div class="product1_box">
              <div class="product1_box_left">
                <div class="goods-box">
                  <div class="goods-title">-HOT DERIVATIVE</div>
                  <div class="goods-bigtitle">热门周边3</div>
                  <div class="goods-title">一</div>
                </div>
              </div>
              <div class="product1_box_right"></div>
            </div>
          </div>
        </div>
        <div class="swiper-button-next2"></div>
        <div class="swiper-button-prev2"></div>
        <div class="swiper-pagination2"></div>
        <!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
      </div>
    </div>
    <!-- swiper轮播图第三个 -->
    <!-- ---商品列表1---  -->

    <!-- ---商品列表2---  -->
    <div class="product_list2">
      <div class="product1_box2">
        <div class="product1_box2_title">-Popularity Series-</div>
        <div class="product1_box2_H1">人气系列</div>
        <div class="product1_box2_page">一</div>
        <ul class="product1_box2_ul">
          <li>礼包收藏</li>
          <li>手办模型</li>
          <li>数码电子</li>
          <li>服饰日用</li>
          <li>新品专区</li>
        </ul>
        <div class="product_list2_bigbox">
          <div class="product1_box2_box1" style="display: block"></div>
          <div class="product1_box2_box1">456</div>
          <div class="product1_box2_box1">789</div>
          <div class="product1_box2_box1">112233</div>
          <div class="product1_box2_box1">556677</div>
        </div>
      </div>
    </div>
    <!-- ---商品列表2---  -->

    <!-- 商品列表3 -->
    <div class="product_list3">
      <div class="product1_box3">
        <div class="product1_box3_title">-Brand Series-</div>
        <div class="product1_box3_H1">品牌系列</div>
        <div class="product1_box3_page">一</div>
        <div class="product_list3_bigbox"></div>
      </div>
    </div>
    <!-- 商品列表3 -->

    <!--商品列表4 -->
    <div class="product_list4">
      <div class="product1_box4">
        <div class="product1_box4_title">-Brand Series-</div>
        <div class="product1_box4_H1">共创系列</div>
        <div class="product1_box4_page">一</div>
        <div class="product_list4_bigbox">
          <div class="swiper-container4">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="#" class="product1_box4_img">
                  <img src="">
                </a>
                <a href="#" class="product1_box4_title">123</a>
                <a href="#" class="product1_box4_pprice"></a>
              </div>
              <div class="swiper-slide">Slide 2</div>
              <div class="swiper-slide">Slide 3</div>
              <div class="swiper-slide">Slide 4</div>
              <div class="swiper-slide">Slide 5</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination4"></div>
          </div>
        
        </div>
      </div>
    </div>
    <!-- 商品列表4 -->

     <!--商品列表5 -->
  <div class="buttom">
   <div class="buttom_box1">
   </div> 
   <div class="buttom_box2">
     <img src="./img/buttom1.jpg">
  </div> 

  </div>


      <!--商品列表5 -->

    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/swper.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/api.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script>
    let uname=localStorage.getItem("uname");
    let top_right_nav=document.querySelector(".top_right_nav")
    strr=`<a href="#" class="tuichu">退出</a>`
    if(uname){
      top_right_nav.innerHTML=uname+strr;
      let fu=top_right_nav.parentNode;
      fu.href="#";
      let tuichu=document.querySelector(".tuichu");
      console.log(tuichu)
      tuichu.onclick=function(){
        localStorage.removeItem("uname");
        location.reload();
      }
    }

      list();
      function list() {
        let pagesize = 20;
        let pagenum = 0;
        let uid = localStorage.getItem("id");
        let params = { pagesize, pagenum, uid };
        axios.get(allproductlist, { params }).then((res) => {
          let asd = res.data.data;
          let obj = asd.sort((a, b) => a.pid - b.pid);
          console.log(obj);
          let str = "";
          for (let i = 0; i < 7; i++) {
            str += `
           <div class="goods-box">
                <a href="./html/item.html?pid=${obj[i].pid}" class="goods_img">
                <img src="${obj[i].pimg}">
                </a>
                <a class="goods_name">${obj[i].pname}</a>
                <div class="goods_price">${obj[i].pprice}</div>
          </div>`;
          }
          let str1 = "";
          for (let i = 7; i < 14; i++) {
            str1 += `
           <div class="goods-box">
                <a href="./html/item.html?pid=${obj[i].pid}" class="goods_img">
                <img src="${obj[i].pimg}">
                </a>
                <a href="./html/item.html?pid=${obj[i].pid}" class="goods_name">${obj[i].pname}</a>
                <div class="goods_price">${obj[i].pprice}</div>
          </div>`;
          }
          let str2 = "";
          for (let i = 14; i <= 16; i++) {
            str2 += `
           <div class="goods-box">
                <a href="./html/item.html?pid=${obj[i].pid}" class="goods_img">
                <img src="${obj[i].pimg}">
                </a>
                <a href="./html/item.html?pid=${obj[i].pid}" class="goods_name">${obj[i].pname}</a>
                <div class="goods_price">${obj[i].pprice}</div>
          </div>`;
          }
          let str3 = `
                <a href="./html/item.html?pid=${obj[0].pid}" class="goods_img">
                <img src="${obj[0].pimg}">
                </a>
                <a class="goods_name" href="./html/item.html?pid=${obj[0].pid}">${obj[0].pname}</a>
                <div class="goods_price">${obj[0].pprice}</div>
          
          `;

          let str4 = "";
          for (let i = 0; i < 8; i++) {
            str4 += ` 
            <div class="product1_box2_box1_box">
            <a href="./html/item.html?pid=${obj[i].pid}" class="product_list2_img">
              <img src="${obj[i].pimg}" />
            </a>
            <a href="./html/item.html?pid=${obj[i].pid}" class="product_list2_name">${obj[i].pname}</a>
            <a href="./html/item.html?pid=${obj[i].pid}" class="product_list2_price">${obj[i].pprice}</a>
          </div> 
            `;
          }
          let str5 = "";
          for (let i = 8; i <= 16; i++) {
            str5 += ` 
            <div class="product1_box2_box1_box">
            <a href="./html/item.html?pid=${obj[i].pid}" class="product_list2_img">
              <img src="${obj[i].pimg}" />
            </a>
            <a href="./html/item.html?pid=${obj[i].pid}" class="product_list2_name">${obj[i].pname}</a>
            <a href="./html/item.html?pid=${obj[i].pid}" class="product_list2_price">${obj[i].pprice}</a>
          </div>  `;
          }
          let str6 = "";
          for (let i = 0; i < 8; i++) {
            str6 += ` 
            <div class="product1_box2_box1_box">
            <a href="./html/item.html?pid=${obj[0].pid}" class="product_list2_img">
              <img src="${obj[0].pimg}" />
            </a>
            <a href="./html/item.html?pid=${obj[0].pid}" class="product_list2_name">${obj[0].pname}</a>
            <a href="./html/item.html?pid=${obj[0].pid}" class="product_list2_price">${obj[0].pprice}</a>
          </div> 
            `;
          }
          let str7 = "";
          for (let i = 0; i < 8; i++) {
            str7 += ` 
            <div class="product1_box2_box1_box">
            <a href="./html/item.html?pid=${obj[1].pid}" class="product_list2_img">
              <img src="${obj[1].pimg}" />
            </a>
            <a href="./html/item.html?pid=${obj[1].pid}" class="product_list2_name">${obj[1].pname}</a>
            <a href="./html/item.html?pid=${obj[1].pid}" class="product_list2_price">${obj[1].pprice}</a>
          </div> 
            `;
          }
          let str8 = "";
          for (let i = 0; i < 8; i++) {
            str8 += ` 
            <div class="product1_box2_box1_box">
            <a href="./html/item.html?pid=${obj[2].pid}" class="product_list2_img">
              <img src="${obj[2].pimg}" />
            </a>
            <a href="./html/item.html?pid=${obj[2].pid}" class="product_list2_name">${obj[2].pname}</a>
            <a href="./html/item.html?pid=${obj[2].pid}" class="product_list2_price">${obj[2].pprice}</a>
          </div> 
            `;
          }
          let str9 = `
          <a class="product_list3_bigbox_left_img" href="./html/item.html?pid=${obj[0].pid}">
       <img src="${obj[17].pimg}">
     </a>

     <a class="product_list3_bigbox_right_img"  href="./html/item.html?pid=${obj[1].pid}">
      <img src="${obj[18].pimg}">
    </a>`;
          let str10=`
 <a href="./html/item.html?pid=${obj[0].pid}" class="product1_box4_img">
  <img src="${obj[0].pimg}">
</a>
<a href="./html/item.html?pid=${obj[0].pid}" class="product1_box4_title">${obj[0].pname}</a>
<a href="./html/item.html?pid=${obj[0].pid}" class="product1_box4_pprice">${obj[0].pprice}</a>
`
          let str11=`
           <a href="./html/item.html?pid=${obj[13].pid}" class="buttom_box_pimg">
          <img src="${obj[19].pimg}">
           </a>
          `
    
          let product1_box = document.querySelectorAll(".product1_box");
          let product1_box_left = document.querySelector(".product1_box_left");
          let product1_box_right = document.querySelector( ".product1_box_right");
          console.log(product1_box_right)
          let product1_box2_box1s = document.querySelectorAll(".product1_box2_box1");
          let product_list3_bigbox = document.querySelector(".product_list3_bigbox");
          let swiper_slides=document.querySelectorAll(".swiper-container4 .swiper-slide");
          let buttom_box1=document.querySelector(".buttom_box1");


          product1_box[0].innerHTML += str;
          product1_box[1].innerHTML += str1;
          product1_box_left.innerHTML += str2;
          product1_box_right.innerHTML = str3;
          product1_box2_box1s[0].innerHTML = str4;
          product1_box2_box1s[1].innerHTML = str5;
          product1_box2_box1s[2].innerHTML = str6;
          product1_box2_box1s[3].innerHTML = str7;
          product1_box2_box1s[4].innerHTML = str8;
          product_list3_bigbox.innerHTML = str9;

          swiper_slides.forEach((item) => {
          item.innerHTML = str10;
          });
          buttom_box1.innerHTML=str11;
          lunbo3();
          lunbo4()
        });
      }

      function lunbo3() {
        var mySwiper2 = new Swiper(".swiper-container2", {
          direction: "horizontal", // 横向切换选项
          loop: true, // 循环模式选项
          autoplay: {
            disableOnInteraction: false,
          },
          effect: "fade",
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination2",
            clickable: true,
          },

          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next2",
            prevEl: ".swiper-button-prev2",
          },

          // 如果需要滚动条
          /*     scrollbar: {
      el: '.swiper-scrollbar',
    }, */
        });
      }
      cut();
      function cut() {
        $(".product1_box2_ul>li").mouseenter(function () {
          $(".product_list2_bigbox>.product1_box2_box1").css("display", "none");
          $(".product_list2_bigbox>.product1_box2_box1")
            .eq($(this).index())
            .css("display", "block");
        });
      }
      //选项卡
      function lunbo4() {
        var swiper = new Swiper(".swiper-container4", {
        /*   loop: true,  // 循环模式选项 */
          slidesPerView: 4,
          spaceBetween: 30,
          freeMode: true,
          autoplay: {
      disableOnInteraction: false,
    },
          pagination: {
            el: ".swiper-pagination4",
            clickable: true,
          },
        });
      }
    </script>
  </body>
</html>
